<template>
  <view class="protocol-container">
    <!-- 共享的文化背景 -->
    <image 
      class="cultural-bg" 
      src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine_bg.png"
      mode="aspectFill"
    ></image>

    <!-- 协议内容卡片 -->
    <view class="protocol-card">
      <image 
        class="horn-decoration" 
        src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/horn.png"
        mode="aspectFit"
      ></image>
      <image 
        class="horn-decoration right" 
        src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/horn.png"
        mode="aspectFit"
      ></image>

      <view class="content">
        <!-- 标题 -->
        <text class="title">用户协议</text>
        
        <!-- 协议内容 -->
        <scroll-view class="protocol-content" scroll-y>
          <text class="section-title">欢迎使用掼牛文化传承平台</text>
          <text class="paragraph">
            请您在使用本平台服务前仔细阅读本协议（特别是加粗内容），同意本协议后即可成为平台用户。
          </text>

          <text class="section-title">一、服务内容</text>
          <text class="paragraph">
            1. 本平台提供文化知识学习、线上活动参与、用户成长体系等服务。\n
            2. 用户可通过完成任务获得积分，积分可用于提升段位等级。
          </text>

          <text class="section-title">二、用户义务</text>
          <text class="paragraph">
            1. 您需提供真实有效的手机号进行注册\n
            2. 不得发布违法或损害传统文化的内容\n
            3. 账号仅限本人使用，禁止转让或出借
          </text>

          <text class="section-title">三、隐私条款</text>
          <text class="paragraph">
            1. 我们严格遵守《网络安全法》保护用户信息\n
            2. 仅在实现服务目的范围内使用您的个人信息\n
            3. 采用SSL加密技术保障数据传输安全
          </text>

          <text class="section-title">四、免责声明</text>
          <text class="paragraph">
            1. 因不可抗力导致的服务中断不承担责任\n
            2. 用户行为导致的损失由行为人自行承担\n
            3. 第三方链接内容不代表本平台观点
          </text>

          <text class="section-title">五、协议修改</text>
          <text class="paragraph">
            1. 修改内容将通过站内消息通知\n
            2. 继续使用服务视为接受修改条款
          </text>

          <text class="section-title">六、联系我们</text>
          <text class="paragraph">
            客服邮箱：service@guanniu.com\n
            服务时间：工作日9:00-18:00
          </text>
        </scroll-view>

        <!-- 返回按钮 -->
        <button class="back-btn" @tap="navigateBack">返回</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.protocol-container {
  height: 100vh;
  position: relative;
  overflow: hidden;

  .cultural-bg {
    width: 100%;
    height: 100%;
    filter: brightness(0.8) sepia(0.2);
  }

  .protocol-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 86%;
    height: 80vh;
    background: rgba(255, 248, 240, 0.95);
    border-radius: 32rpx;
    padding: 60rpx 40rpx 40rpx;
    box-shadow: 0 10rpx 30rpx rgba(139, 69, 19, 0.3);

    .horn-decoration {
      position: absolute;
      width: 120rpx;
      height: 180rpx;
      top: -80rpx;
      
      &.right {
        right: -40rpx;
        transform: scaleX(-1);
      }
      
      &:not(.right) {
        left: -40rpx;
      }
    }

    .content {
      height: 100%;
      position: relative;
      z-index: 2;

      .title {
        display: block;
        text-align: center;
        font-size: 44rpx;
        color: #8B4513;
        font-weight: bold;
        margin-bottom: 40rpx;
        letter-spacing: 4rpx;
        text-shadow: 2rpx 2rpx 4rpx rgba(255, 228, 196, 0.5);
      }

      .protocol-content {
        height: calc(100% - 120rpx);
        padding-bottom: 20rpx;

        .section-title {
          display: block;
          font-size: 34rpx;
          color: #A0522D;
          font-weight: 600;
          margin: 30rpx 0 15rpx;
          padding-left: 10rpx;
          border-left: 6rpx solid #8B4513;
        }

        .paragraph {
          display: block;
          font-size: 28rpx;
          color: #666;
          line-height: 1.8;
          margin-bottom: 25rpx;
          white-space: pre-wrap;
        }
      }

      .back-btn {
        width: 200rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: #8B4513;
        color: #FFE4C4;
        border-radius: 40rpx;
        font-size: 30rpx;
        margin: 20rpx auto 0;
      }
    }
  }
}
</style>